<template>
  <Header />
  <div class="back-page">
    <div class="announcement-page">
      <!-- 顶部标题 -->

      <div class="header">
        <el-link
          type="primary"
          @click="onCancel"
          class="back-link"
          icon="DArrowLeft"
          >返回</el-link
        >
        <span>首页 / 搜索公告</span>
      </div>

      <div class="search-bar">
        <span style="font-weight: 600; font-size: 15px">发布时间：</span>
        <el-radio-group v-model="timeRange" @change="handleTimeRangeChange">
          <el-radio-button label="今天"></el-radio-button>
          <el-radio-button label="近3天"></el-radio-button>
          <el-radio-button label="近1周"></el-radio-button>
          <el-radio-button label="近1月"></el-radio-button>
          <el-radio-button label="近3月"></el-radio-button>
          <el-radio-button label="近半年"></el-radio-button>
          <el-radio-button label="全部"></el-radio-button>
        </el-radio-group>
        <el-input
          v-model="name"
          placeholder="请输入公告关键字"
          style="margin-left: 16px; width: 15%"
        />
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          start-placeholder="请选择发布起始时间"
          end-placeholder="请选发布择结束时间"
          :disabled="datePickerDisabled"
          style="margin-left: 16px; width: 15%"
        />
        <el-button type="primary" @click="getSearchList">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>

      <el-table
        :data="announcements"
        style="margin-top: 16px"
        @row-click="handleRowClick"
      >
        <el-table-column prop="createTime" label="发布日期" align="center" />
        <el-table-column prop="name" label="公告名称" align="center" />
        <el-table-column
          prop="applyStartTime"
          label="项目征集起始日期"
          align="center"
        />
        <el-table-column
          prop="applyEndTime"
          label="项目征集截止日期"
          align="center"
        />
      </el-table>
      <PageNation
        :total="total"
        :pageNum="searchForm.pageNum"
        :pageSize="searchForm.pageSize"
        @currentChange="currentChange"
        @pageSizeChange="pageSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import moment from "moment";
import { onMounted, ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getProjectList } from "@/api/projectNotice";
import Header from "../../components/Header.vue";

import PageNation from "@/components/PageNation.vue";
const router = useRouter();
const route = useRoute();

const userInfo = computed(
  () =>
    JSON.parse(localStorage.getItem("judgeInfo")) ||
    JSON.parse(localStorage.getItem("supplierInfo"))
);
const total = ref("");

const onCancel = () => {
  if (window.history.length > 1) {
    window.history.back(); // 返回上一页
  } else {
    router.push(`judgeProject?type=${route.query.type}`);
    window.location.reload(); // 刷新当前页面
  }
};

const timeRange = ref("全部"); // 默认选中 "全部"
const name = ref("");
const dateRange = ref([]);
const announcements = ref([]);
const datePickerDisabled = ref(false); // 控制日期选择器禁用状态
const searchForm = ref({});

// 日期范围映射
const timeRangeMap = {
  今天: [new Date(), new Date()],
  近3天: [subtractDays(3), new Date()],
  近1周: [subtractDays(7), new Date()],
  近1月: [subtractMonths(1), new Date()],
  近3月: [subtractMonths(3), new Date()],
  近半年: [subtractMonths(6), new Date()],
};

// 减天工具函数
function subtractDays(days) {
  const date = new Date();
  date.setDate(date.getDate() - days);
  return date;
}

// 减月工具函数
function subtractMonths(months) {
  const date = new Date();
  date.setMonth(date.getMonth() - months);
  return date;
}

// 当选择时间范围按钮时
const handleTimeRangeChange = (value) => {
  if (value === "全部") {
    datePickerDisabled.value = false; // 启用日期选择器
    dateRange.value = [];
    searchForm.value.publishStartTime = "";
    searchForm.value.publishEndTime = "";
    getSearchList();
  } else {
    datePickerDisabled.value = true; // 禁用日期选择器
    const [start, end] = timeRangeMap[value];
    dateRange.value = [start, end];
    searchForm.value.publishStartTime = moment(dateRange.value[0]).format(
      "YYYY-MM-DD"
    );
    searchForm.value.publishEndTime = moment(dateRange.value[1]).format(
      "YYYY-MM-DD"
    );
    getSearchList();
  }
};

// 重置功能
const reset = () => {
  timeRange.value = "全部";
  name.value = "";
  dateRange.value = [];
  datePickerDisabled.value = false;
  searchForm.value = { pageNum: 1, pageSize: 10 };
  getSearchList();
};

//获取项目公告
const getSearchList = () => {
  getProjectList(searchForm.value).then((res) => {
    if (res.code == 200) {
      announcements.value = res.rows;
      total.value = res.total;
    }
  });
};

const handleRowClick = (row) => {
  if (userInfo.value && userInfo.value.type) {
    router.push({
      path: "/judgedetail",
      query: { id: row.id, type: "search" },
    });
  } else {
    router.push({
      path: "/projectNotice",
      query: { noticeId: row.id, type: "search", pdfUrl: row.noticeUrl },
    });
  }
};

const currentChange = (val) => {
  searchForm.value.pageNum = val;
  getSearchList();
};

const pageSizeChange = (val) => {
  searchForm.value.pageSize = val;
  getSearchList();
};

onMounted(() => {
  getSearchList();
});
</script>

<style scoped>
.back-page {
  min-height: calc(100vh - 56px);
  background: url("../../assets/f87147698f07020d4fea348f49da0166.png") no-repeat
    center center;
  background-size: cover;
}
.header {
  display: flex;
  align-items: center;
}
.header .logo {
  display: flex;
  align-items: center;
}
.header .logo span {
  margin-left: 16px;
  font-size: 18px;
  font-weight: bold;
}
.announcement-page {
  width: 76%;
  margin: auto;
  padding-top: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
  color: #333;
}

.back-link {
  margin-right: 8px;
}

.search-bar {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.el-table {
  background: #fff;
  border-radius: 8px;
}
::v-deep .el-table tr {
  cursor: pointer;
}
</style>
